//导入 react
import React, { useContext, useEffect, useState } from "react";
//导入 TestCom
// import TestCom from './components/1-TestCom/TestCom';
// import PluginCom from './components/3-Plugin/PluginCom';
// import StateCom from './components/4-State/1-StateCom';
// import StateCom from './components/4-State/2-StateCom';
// import BoxColor from './components/4-State/3-BoxColor';
// import DivShow from './components/4-State/4-DivShow';
// import SlideCom from './components/4-State/5-SlideCom';
// import PropsCom from "./components/5-props/1-PropsCom";
// import Button from "./components/5-props/2-Button";
// import PropsTypeCom from "./components/5-props/3-PropsTypeCom";
// import RefCom from "./components/6-ref/1-RefCom";
// import RefCom from "./components/6-ref/3-RefCom";
// import FormCom from "./components/7-Form/1-FormCom";
// import FormCom from "./components/7-Form/2-FormCom";
// import FormCom from "./components/7-Form/3-FormComSim";
// import FormCom from "./components/7-Form/4-FormComSim2";
// import ColorPicker from "./components/7-Form/5-ColorPicker";
// import LifeCom from "./components/8-LifeCycle/1-LifeCom";
// import ZongJieCom from "./components/8-LifeCycle/4-ZongJieCom";
// import UseStateCom from "./components/9-Hooks/1-useStateCom";
// import ChangeBg from "./components/9-Hooks/1-state/2-changeBg";
// import PropsCom from "./components/9-Hooks/2-props/PropsCom";
// import RefCom from "./components/9-Hooks/3-ref/RefCom";
// import FormCom from "./components/9-Hooks/4-form/FormCom";
// import EffectCom from "./components/9-Hooks/5-Effect/1-EffectCom";
// import ClockCom from "./components/9-Hooks/5-Effect/2-ClockCom";
// import StateUp from "./components/9-Hooks/6-StateUp/StateUp";
// import TodoList from "./components/10-TodoList/TodoList";
// import A from "./components/11-TransData/2-祖孙/A";
// import PubSubCom from "./components/11-TransData/3-PubSub/PubSubCom";
// import Hero from "./components/11-TransData/4-Hero/Hero";
// import Clock from "./components/8-LifeCycle/2-Clock";
// import Chat from "./components/8-LifeCycle/3-Chat";
// import GoodsImage from "./components/9-Hooks/1-state/3-GoodsImage";
//导入与路由相关的组件   @babel/plugin-proposal-private-property-in-object
// BrowserRouter 浏览器路由器, 用来包裹所有路由相关的组件
// Routes  路由的复数表示形式, 该组件用来包裹所有的路由组件
// Route   路由的意思, 用来设置路由规则
// import {
//   BrowserRouter,
//   Routes,
//   Route,
//   Link,
//   NavLink,
//   Navigate,
//   useRoutes,
// } from "react-router-dom";
// import Home from "./pages/Home/Home";
// import About from "./pages/About/About";
// import News from "./pages/News/News";
// import Message from "./pages/Message/Message";
// import NotFound from "./pages/NotFound/NotFound";
// import Welcom from "./pages/Welcom/Welcom";
// import YYG from "./pages/YYG/YYG";
import "./App.css";
// import DiffCom from "./components/12_DiffCom/DiffCom";
import MemoCom from "./components/13_MemoCom/MemoCom";
import ReducerCom from "./components/14_ReducerCom/ReducerCom";
import ImpreCom from "./components/15_useImpre/ImpreCom";
import LayoutCom from "./components/16_LayoutCom/LayoutCom";
import useClientWidth from "./components/17_CustomHook/CustomHookCom";
// import MyMusic from "./pages/MyMusic/MyMusic";
// import Gedan from "./pages/Gedan/Gedan";
// import Singer from "./pages/Singer/Singer";
//导入路由的数组
// import routesArr from './routes';
// import HeroDetail from "./pages/HeroDetail/HeroDetail";
// import HeroList from "./pages/HeroList/HeroList";
// import { useNavigate, useRoutes } from "react-router-dom";
//声明类组件
function App() {
  let width = useClientWidth();
  return (
    <div style={{padding: 50}}>
      <h2>当前视口的宽度为: {width}</h2>
    </div>
  );
}

//暴露
export default App;
